<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 100%;
				overflow: hidden;
				background-image: url(img-01.jpg);
			}
			.imgdiv {
				position: absolute;
				height: 222px;
				width: 222px;
			}
			
			.imgdiv img {
				position: absolute;
			}
		</style>
	</head>

	<body>
		<!--<div data-rotx="5" data-roty="6" class="imgdiv" style="top: 20px;left: 300px;">
			<img src="img/ch0.png" />
			<img src="img/ch1.png" />
			<img src="img/ch2.png" />
		</div>
		<div data-rotx="3" data-roty="7" class="imgdiv" style="top: 5px;left: 5px;">
			<img src="img/ch0.png" style="opacity: 0.5;" />
			<img src="img/ch1.png" style="opacity: 0.1;" />
			<img src="img/ch2.png" style="opacity: 0.8;" />
		</div>-->
		<script type="text/javascript">
			//创建div,创建img
			function createImg() {
				for(var i = 0; i < 1; i++) {//一次创建div的个数
					var div = document.createElement("div");
					div.className = "imgdiv";//给创建的div赋予类样式；
					div.style.top = "5px";
					div.style.left = "5px";
					var size = parseInt(Math.random()*100 +50);
					div.style.height = size + "px";
					div.style.width = size + "px";
					div.setAttribute("data-rotx",parseInt((Math.random()*15)+5));//创建div里的自定义类名
					div.setAttribute("data-roty",parseInt((Math.random()*15)+5));
					for(var k = 0; k < 4; k++) {
						var img = document.createElement("img");
						img.src = "img/ch" + k + ".png";
						div.appendChild(img);//在div里添加img
					}
					document.body.appendChild(div);//在页面中添加创建的div
				}
			}
			var imgNum = 0;//定义div的个数
			var id = setInterval(function(){//每隔多长时间调用一次函数
				createImg();
				imgNum++;
				if(imgNum ==5){
					clearInterval(id)//当div的个数达到10个则清除循环
				}
			},2000)
			setInterval(function() {
				moveImg()
			}, 50)//每隔100毫秒改变一次div的坐标

			function moveImg() {
				var divs = document.getElementsByTagName("div");//获取所有创建的div
				var Height = parseInt(document.documentElement.clientHeight);//得到浏览器内容的高度
				var Width = parseInt(document.documentElement.clientWidth);//得到浏览器内容的宽度
				for(var i = 0; i < divs.length; i++) {
					//改变每一个div的坐标；
					var rotx = parseInt(divs[i].getAttribute("data-rotx"));//得到div的横轴坐标
					var roty = parseInt(divs[i].getAttribute("data-roty"));//得到div的纵轴坐标
					var top = parseInt(divs[i].style.top);//获得div与头部尾部的距离
					var left = parseInt(divs[i].style.left);//获得div与左右的距离
					top += roty;//top = top+roty
					left += rotx;
					divs[i].style.top = top + "px";//赋予所有div与屏幕之间的距离
					divs[i].style.left = left + "px";
					var height = parseInt(divs[i].style.height);
					var width = parseInt(divs[i].style.width);
					if(top >= Height - height ) {//下   //小球以div坐上脚为基准，如果小球的底边距离可见页面顶部的高度大于页面的高度
						roty = -roty;//则y轴方向向相反方向移动
						divs[i].style.top = (Height -height)+"px";
						setImgOpacity(divs[i])
					}
					if(top <= 0){//上,小球的顶部距离页面顶部的距离；
						roty = -roty;
						divs[i].style.top = "0px";
						setImgOpacity(divs[i])
					}
					if(left >= Width - width) {//右，小球的左边距离页面右边的距离
						rotx = -rotx;
						divs[i].style.left = (Width -width)+"px";
						setImgOpacity(divs[i])
					}
					if(left <= 0){//左，小球的左边距离页面左边的距离比较
						rotx = -rotx;
						divs[i].style.left ="0px";
						setImgOpacity(divs[i])
					}
					divs[i].setAttribute("data-rotx", rotx);
					divs[i].setAttribute("data-roty", roty);
				}
			}

			function setImgOpacity(div) {
				var imgs = div.getElementsByTagName("img");
				for(var i = 0; i < imgs.length-1; i++) {
					imgs[i].style.opacity = Math.random();
				}
			}
		</script>
	</body>

</html>